<script>
import {RouterLink, RouterView} from 'vue-router'
import {mapStores, mapState, mapWritableState} from 'pinia'
import useModelStore from '@/stores/modal'

export default {
  name: 'AppHeader',
  computed: {
    // 使用状态
    ...mapStores(useModelStore),
    // mapWritableState,mapState([]) 都有时 hiddenClass 才生效
    ...mapWritableState(useModelStore, ['isOpen']),
    ...mapState(useModelStore, ['hiddenClass'])
  },
  // mapState 是只读的,不能更改状态数据;mapWritableState 只允许修改数据
  methods: {
    translate() {
      if (this.$i18n.locale === 'en') {
        this.$i18n.locale = 'cn'
      } else {
        this.$i18n.locale = 'en'
      }
    },
    toggleAuthModal() {
      this.isOpen = !this.isOpen
      console.log(this.isOpen)
      console.log(this.hiddenClass)
    }
  }
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>

    <div class="wrapper">
      <div>
        <p :class="hiddenClass">open</p>
        <button @click="toggleAuthModal"
                class="rounded-xl p-2 bg-amber-400">change open
        </button>
        <button @click="translate">{{ $t('info.translate') }}</button>
      </div>
      <hr class="m-4">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/login">Login</RouterLink>
      </nav>
    </div>
  </header>
  <!-- 显示路由内容 outlet -->
  <RouterView/>
</template>
